<template>
	<div class="allTitle" :class="allTitleFixed?'allTitle_fixed':''">
		<div class="index_title">
			<image src="../static/logo.png" mode=""></image>
			<div class="join_now_btn" @tap="register">{{He.lang('joinNow')}}</div>
			<button type="button" class="navbar-toggle collapsed" @click="collapseOpen">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
		<div class="collapse" :style="{height:height2}">
			<p v-for="(item,index) in collapseList" :key="index" @click="goAboutUs(index,item)">{{item}}</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'allTitle',
		props: {
			allTitleFixed: {
				type: Boolean,
				default: false
			},
			indexName: {
				type: String,
			},
			tron: {
				type: Object
			}
		},
		data() {
			return {
				collapseShow: false,
				height2: '',
				collapseList: this.He.lang('tabMenu')
			}
		},
		methods: {

			async register() {
				let me = this;				
				let res = await me.He.getWallet(me.tron)
				let yqm = me.He.getParentId()				
				if (res.code != 1) {					
					me.He.Toast(res.msg);
					return false;
				}
				let address = res.data;
				me.He._post('register',{address:address,yqm:yqm},res=>{					
					me.$emit('regResult',res)								
				},true)
			},

			goAboutUs(index,item) {
				//console.log(item)
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				} else if (index == 1) {
					//console.log(1231231)
					uni.navigateTo({
						url: '/pages/index/aboutus'
					})
				}else if(index == 6){
					console.log(index)
					let lang = 'en'
					if(item == '切换中文')lang = 'zh'
					uni.setStorageSync('_language', lang);
					window.location.href = '/'
				} else {
					if (this.indexName) {
						let params = {
							typeName: 'index',
							id: index - 1
						}
						uni.navigateTo({
							url: '/pages/index/aboutus?params=' + params
						})
					} else {
						this.$emit('goOffsetTop', index - 1);
					}
				}
			},
			collapseOpen() {
				if (!this.collapseShow) {
					this.collapseShow = true
					this.height2 = '320px';
				} else {
					this.collapseShow = false;
					this.height2 = '0px';
				}
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.allTitle_fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}

	.index_title {
		display: flex;
		align-items: center;
		border-radius: 0;
		height: 85upx;
		border: 0;
		color: #36454e;
		background: #ffffff;
		margin: 0;
		z-index: 9;
		padding: 12upx 30upx;

		image {
			width: 300upx;
			height: 60upx;
			margin-right: 120upx;
		}

		.navbar-toggle {
			background-color: #6d2de7;
			height: 64upx;
			border: none;
			border-radius: 4px;
			padding-top: 8upx;
			padding-bottom: 2upx;

			.icon-bar {
				display: block;
				width: 40upx;
				height: 4upx;
				border-radius: 1px;
				background-color: #fff;
				margin-top: 10upx;
			}
		}
	}

	::-webkit-scrollbar {
		width: 0;
	}

	.collapse {
		height: 0px;
		overflow: auto;
		width: 100%;
		font-size: 3.2vw;
		background-color: #ffffff;
		transition: height 1s;
		border-top: 1px solid #e2e2e2;
		margin-top: -1px;
		p {
			margin: 0;
			line-height: 45px;
			text-align: left;
			border-bottom: 1px solid #e2e2e2;
			padding: 0 20px;
			text-transform:uppercase;
		}
	}

	.join_now_btn {
		width: 175upx;
		line-height: 65upx;
		font-size: 26upx;
		border-radius: 5px;
		text-align: center;
		background: linear-gradient(to right, #6d2de7 0%, #37c6ab 100%);
		cursor: pointer;
		color: #fff;
		margin-right: 12upx;
		display: inline-block;
	}
</style>
